<template>
  <el-dialog
    title="异常告警"
    :visible.sync="dialogVisible"
    :modal="true"
    :appendToBody="true"
    width="95%"
    height="88%"
    v-dialog-drag
    class="work-abnormal-dialog"
    :close-on-click-modal="false"
    top="3vh"
    @close="dialogClose()"
    @open="dialogOpen()"
  >
    <div class="box-card">
      <el-form ref="queryForm" :inline="true"  class="clearfix"  @submit.native.prevent>
        <el-form-item prop="erpCommonList">
          <el-cascader
            v-model="erpCommonList"
            :options="treeList"
            :props='defaultProps'
            clearable
            ref="cascader"
            style="width:300px;"
            size="small"
            readonly
            @change="selectQuery"
          >
          </el-cascader>
        </el-form-item>

        <!-- <treeselect
          v-model="erpCommonList"
          :options="treePermitList"
          :show-count="true"
          placeholder="请选择部门"
        /> -->
        <el-form-item prop="posStationType" class='posStationType'>
          <el-select
            v-model="posStationType"
            size="small"
            placeholder="请选择工位和岗位"
            style="width: 100px;"
            @change='selectType'
          >
           <el-option
            v-for="item in posStationList"
            :label="item.label"
            :value="item.value"
            :key="item.value"
            :disabled="item.disabled"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-select
            v-if='posStationType == 1'
            v-model="queryParmas.workStationId"
            class="select-value"
            placeholder="请选择工位"
            size="small"
            style="width: 150px;"
            clearable
            @change="queryData"
          >
             <el-option
              v-for="item in stationList"
              :label="item.label"
              :value="item.id"
              :key="item.id"
              >
              </el-option>
          </el-select>

          <el-select
            v-if='posStationType == 2'
            v-model="queryParmas.postManageCode"
            class="select-value"
            placeholder="请选择岗位"
            size="small"
            style="width: 150px;"
            clearable
            @change="queryData"
          >
           <el-option
            v-for="item in postList"
            :label="item.codename"
            :value="item.codevalue"
            :key="item.codevalue"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item class="more">
          <el-button
            v-hasPermi="['exceptionMgmt:escalation:escalation']"
            type="primary"
            size="mini"
            @click="handleReport"
            >上报异常</el-button
          >
          <el-button
            type="primary"
            size="mini"
            v-hasPermi="['exceptionMgmt:distribute:add']"
            @click="handleDistribute"
            >新增异常</el-button>
            <el-button
              type="primary"
              size="mini"
              :disabled="single != true && single != false"
              @click="handleIgnore()"
              v-hasPermi="['exceptionMgmt:operate:ignore']"
              >忽略</el-button
            >
          <el-link type="warning" :underline="false" @click="lookMore">更多
            <img src="@/assets/images/workbench/arr-right.png"/>
          </el-link>
        </el-form-item>
      </el-form>

      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane
          v-for="item in tabList"
          :key='item.name'
          :label="item.label"
          :name="item.name"
        >
          <div class="item" slot="label">
            <img :src="item.path">
            <span class="name">{{item.label}}</span>
            <span class='total-fz' :style="{color:item.num ? item.color : '#606266'}">{{item.num}}</span>
          </div>
        </el-tab-pane>
      </el-tabs>

      <el-table
        ref="Table"
        :data="tableData"
        :key="activeName"
        tooltip-effect="dark"
        show-overflow-tooltip
        style="width: 100%;overflow: auto;"
        height="calc(100% - 40px - 40px - 40px - 50px)"
        v-loading="loading"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" v-if='activeName == 1'></el-table-column>
        <el-table-column v-for="item in columnData" :label="item.label" :key='item.key' :width='item.width ? item.width : "auto"'>
          <span slot-scope="{ row }" v-if='item.prop == "abnormalName" && (activeName == 1 || activeName == 2)'>
            <el-button type="text" class='status-look' @click.stop="handleHandle(row,'look')">{{row.abnormalName}}</el-button>
          </span>

          <span slot-scope="{ row }" v-else-if='item.prop == "orderName" && activeName == 3'>
            <el-button type="text" class='status-look' @click.stop="handleLook(row,'look')">{{row.orderName}}</el-button>
          </span>

          <span slot-scope="{ row }" v-else-if='item.prop == "abnormalLevelCode"'>
            <span class='status-1' v-if='row.abnormalLevelCode == "AbnormalOne"'>一级</span>
            <span class='status-2' v-if='row.abnormalLevelCode == "AbnormalTwo"'>二级</span>
            <span class='status-3' v-if='row.abnormalLevelCode == "AbnormalThree"'>三级</span>
          </span>

          <span slot-scope="{ row }" v-else-if='item.prop == "abnormalDes"'>
            <el-tooltip
              class="box-item"
              popper-class="tooltip-popper"
              placement="top"
            >
              <div style="max-width: 260px; line-height: 18px" slot="content">{{ row.abnormalDes }}</div>
              <div class='tooltip-detail'>{{ row.abnormalDes }}</div>
            </el-tooltip>
          </span>

          <span slot-scope="{ row }" v-else-if='item.prop == "processedName"'>
            <el-tooltip
              class="box-item"
              popper-class="tooltip-popper"
              placement="top"
            >
              <div style="max-width: 260px; line-height: 18px" slot="content">{{ row.processedName || row.workStationName }}</div>
              <span class='tooltip-detail'>{{row.processedName || row.workStationName}}</span>
            </el-tooltip>
          </span>

          <span slot-scope="{ row }" v-else>
            <span>{{row[item.prop]}}</span>
          </span>
        </el-table-column>

        <el-table-column label="操作" align="center" fixed="right"  v-if='activeName != 4' width="140">
          <template slot-scope="{row}">
            <span v-if='activeName == 1 || activeName == 2'>
              <span v-if='row.status == 1'>
                <el-button v-hasPermi="['exceptionMgmt:operate:handle']" type="text" @click.stop="handleHandle(row,'operate')">处理</el-button>
                <el-button v-hasPermi="['exceptionMgmt:operate:ignore']" type="text" @click.stop="handleIgnore(row)">忽略</el-button>
              </span>
              <span v-if='row.status == 2'>
                <el-button v-hasPermi="['exceptionMgmt:operate:follow']" type="text" @click.stop="handleHandle(row,'operate')">跟进</el-button>
              </span>
              <el-button v-hasPermi="['exceptionMgmt:operate:transfer']" type="text" @click.stop="handleTransfer(row)" class="mg-l-10">转办</el-button>
            </span>
            <span v-if='activeName == 3'>
              <el-button v-hasPermi="['exceptionMgmt:escalation:approval']" v-if='row.status == 1' type="text" @click.stop="handleApproval(row)">审核</el-button>
            </span>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-if='pager.total > 10'
        :total="pager.total"
        :page.sync="pager.pageNum"
        :limit.sync="pager.pageSize"
        @pagination="getList"
      />

      <report-distribute-dialog
        :visible.sync="detailDialog.visible"
        :row="detailDialog.row"
        :mode="detailDialog.mode"
        :title="detailDialog.title"
        @submit-success="updateData"
      />
      <transfer-dialog
       :visible.sync="transferDialog.visible"
      :row="transferDialog.row"
       @submit-success="updateList"
       />
       <ignore-dialog
         :visible.sync="ignoreDialog.visible"
         :rows="ignoreDialog.row"
         @submit-success="updateList">
       </ignore-dialog>
       <excepDetail
        :row="excepData.row"
        :mode="excepData.mode"
        :visible.sync="excepData.visible"
        @submit-success="updateList"
       />
       <!-- 异常上报详情 -->
       <report-distribute-look
         :visible.sync="lookDialog.visible"
         :mode="lookDialog.mode"
         :title="lookDialog.title"
         :row="lookDialog.row">
       </report-distribute-look>
    </div>
  </el-dialog>
</template>
<script>
  import reportDistributeDialog from "@/views/exceptionMgmt/components/reportDistributeDialog";
  import ignoreDialog from "@/views/exceptionMgmt/components/ignoreDialog";
  import transferDialog from "@/views/exceptionMgmt/components/transferDialog";
  import excepDetail from "@/views/exceptionMgmt/components/excepDetail";
  import reportDistributeLook from "@/views/exceptionMgmt/components/reportDistributeLook";
  import {warmWorkList} from "@/api/workbench/index";
  import {abnormalWorkList,approvalWorkList} from "@/api/workbench/index";
  import { mapState,mapGetters} from "vuex";
export default {
  props:{
    tabName:{
      type:String,
      default:"1"
    },
    visible: {
      type: Boolean,
      default: false
    },
    abnormalTotal:{
      type:Array,
      default:[0,0,0,0]
    },
    userInfo:{
      type: Object,
      default: ()=>{}
    }
  },

  // inject:['userInfo'],
  computed: {
    dialogVisible: {
      set(val) {
        this.$emit("update:visible", val)
      },
      get() {
        return this.visible
      }
    },
    ...mapGetters([
      'treePermitList'
    ]),
  },

  dicts: ["PostManage"],
  data() {
    return {
      tabList:[
        {label:"待处理",name:"1",path:require("@/assets/images/workbench/warning.png"),num:0,color:"#F54E1E"},
        {label:"进行中",name:"2",path:require("@/assets/images/workbench/doing.png"),num:0,color:"#2F83FF"},
        {label:"待审核上报 ",name:"3",path:require("@/assets/images/workbench/approval.png"),num:0,color:"#FF9300"},
        {label:"今日预警 ",name:"4",path:require("@/assets/images/workbench/todo.png"),num:0,color:"#FF9300"}
      ],
      columnData:[],
      todoColumn:[
        {label:"异常名称",prop:"abnormalName",key:1},
        {label:"异常分类",prop:"abnormalTypeName",key:2,width:85},
        {label:"等级",prop:"abnormalLevelCode",key:3,width:75},
        {label:"异常描述",prop:"abnormalDes",key:4},
        {label:"车间",prop:"workshopName",key:5},
        {label:"产线",prop:"lineName",key:6,width:150},
        {label:"生成时间",prop:"buildDate",key:7,width:165},
        {label:"责任人",prop:"processedName",key:24}
      ],
      warnColumn:[
        {label:"预警名称",prop:"warmName",key:8},
        {label:"预警分类",prop:"abnormalTypeName",key:9,width:85},
        {label:"关联任务",prop:"jobName",key:10},
        {label:"关联指标",prop:"indexName",key:11},
        {label:"关联设备",prop:"equipmentName",key:12},
        {label:"车间",prop:"workshopName",key:13},
        {label:"产线",prop:"lineName",key:14,width:150},
        {label:"生成时间",prop:"warmDate",key:15,width:165}
      ],
      approvalColumn:[
        {label:"异常名称",prop:"orderName",key:16},
        {label:"异常分类",prop:"abnormalTypeName",key:17,width:85},
        {label:"等级",prop:"abnormalLevelCode",key:18,width:75},
        {label:"车间",prop:"workshopName",key:19},
        {label:"产线",prop:"lineName",key:20,width:150},
        {label:"上报人",prop:"reportName",key:21},
        {label:"上报时间",prop:"reportDate",key:22,width:165}
      ],
      tableData:[],
      loading: false,
      single: null,
      activeName:"1",
      pager: {
        total: 0,
        pageNum: 1,
        pageSize: 10
      },
      columnMap:{
        "1":"todoColumn",
        "2":"todoColumn",
        "3":"approvalColumn",
        "4":"warnColumn"
      },
      functionMap:{
        "1":"getAbnormalWorkList",
        "2":"getAbnormalWorkList",
        "3":"getApprovalWorkList",
        "4":"getWarmWorkList"
      },
      detailDialog:{
        visible:false,
        row:null,
        mode:null,
        title:null
      },
      transferDialog:{
        visible:false,
        row:null
      },
      excepData:{
        visible:false,
        mode:"",
        row:null
      },
      lookDialog:{
        visible:false,
        mode:"report",
        title:null,
        row:null,
      },
      ignoreDialog:{
        visible:false,
        row:null
      },
      queryParmas:{
        factoryDeptCode: null,
        workshopCode: null,
        erpProductionLineCode:null,
        workStationId:null,
        postManageCode:null
      },
      defaultProps: {
        value: "code",
        label: "label",
        checkStrictly: true,
        emitPath: true,
      },
      stationList:[],
      posStationType:"2",
      posStationList:[
        {label:"工位",value:"1",disabled:true},
        {label:"岗位",value:"2",disabled:false}
      ],
      treeList:[],
      postList:[],
      erpCommonList:[]
    };
  },

  methods:{
    dialogClose(){
      this.resetFormData()
    },

    dialogOpen(){
      if(this.abnormalTotal?.length){
        this.abnormalTotal.forEach((item,index) => {
          this.tabList[index].num = item
        })
      }
      this.activeName = this.tabName ? this.tabName : "1";
      this.$nextTick(()=>{
        this.columnData = this[this.columnMap[this.activeName]];
      })
      this.treeList = this.treePermitList.map(factory => {
        return{
          code:factory.code,
          id:factory.id,
          label:factory.label,
          children:factory?.children?.length ? factory.children.map(workshop => {
            return{
              code:workshop.code,
              id:workshop.id,
              label:workshop.label,
              workshopType:workshop.workshopType,
              children:workshop?.children?.length ? workshop.children.map(line => {
                return{
                  code:line.code,
                  id:line.id,
                  label:line.label
                }
              }):[]
            }
          }):[]
        }
      })
      this.treeList = this.getTreeData(this.treeList);
      this.postList = this.userInfo?.postManager?.length ? this.dict.PostManage?.filter(ele => this.userInfo?.postManager.includes(ele.codevalue)) : this.dict.PostManage
      this.getList();
    },

    //更新数据
    getList(){
      this[this.functionMap[this.activeName]]()
    },

    updateList(){
      this.getList();
      this.$emit("updateTotal",this.activeName)
    },

    //上报和下发异常之后，更新相应tab的数量
    updateData(){
      if(this.detailDialog.mode == "report"){//上报异常
        this.activeName = "3";
      }
      else if(this.detailDialog.mode == "distribute"){//下发异常
        this.activeName = "1";
      }
      this.columnData = [];
      this.tableData = [];
      this.pager.total = 0;
      this.pager.pageNum = 1;
      this.columnData = this[this.columnMap[this.activeName]];
      this.updateList()
    },

    getWarmWorkList() {
      this.loading = true;
      const { pageNum, pageSize } = this.pager;
      const param = {
        query:{
          factoryDeptCode:this.queryParmas.factoryDeptCode,
          workshopCode:this.queryParmas.workshopCode,
          erpProductionLineCode:this.queryParmas.erpProductionLineCode,
          workStationId:this.queryParmas.workStationId,
          postManageCode:this.queryParmas.postManageCode
        },
        pageNum,
        pageSize,
      };
      warmWorkList(param)
      .then((res) => {
        if(res.code == 200){
          this.tableData = res?.rows || [];
          this.pager.total = res?.total || 0;
          this.tabList[3].num = res?.total || 0;
          this.loading = false;
        }else{
          this.tableData = [];
          this.pager.total = 0;
          this.tabList[3].num = 0;
          this.loading = false;
        }
      })
      .catch(() => {
        this.tableData = [];
        this.pager.total = 0;
        this.loading = false;
      });
    },

    getApprovalWorkList() {
      this.loading = true;
      const { pageNum, pageSize } = this.pager;
      const param = {
        query:{
          factoryDeptCode:this.queryParmas.factoryDeptCode,
          workshopCode:this.queryParmas.workshopCode,
          erpProductionLineCode:this.queryParmas.erpProductionLineCode,
          workStationId:this.queryParmas.workStationId,
          postManageCode:this.queryParmas.postManageCode
        },
        pageNum,
        pageSize,
      };
      approvalWorkList(param)
      .then((res) => {
        if(res.code == 200){
          this.tableData = res?.rows || [];
          this.pager.total = res?.total || 0;
          this.tabList[2].num = res?.total || 0;
          this.loading = false;
        }else{
          this.tableData = [];
          this.pager.total = 0;
          this.pager.pageNum = 1;
          this.tabList[2].num = 0;
          this.loading = false;
        }
      })
      .catch(() => {
        this.tableData = [];
        this.pager.total = 0;
        this.pager.pageNum = 1;
        this.loading = false;
      });
    },

    getAbnormalWorkList(status) {
      const { pageNum, pageSize } = this.pager;
      const param = {
        query:{
          factoryDeptCode:this.queryParmas.factoryDeptCode,
          workshopCode:this.queryParmas.workshopCode,
          erpProductionLineCode:this.queryParmas.erpProductionLineCode,
          workStationId:this.queryParmas.workStationId,
          postManageCode:this.queryParmas.postManageCode,
          status:this.activeName
        },
        pageNum,
        pageSize,
      };
      abnormalWorkList(param)
      .then((res) => {
        if(res.code == 200){
          this.tableData = res?.rows || [];
          this.pager.total = res?.total || 0;
          this.loading = false;
          if(this.activeName == 1){//待处理
            this.tabList[0].num = res?.total || 0;
          }else if(this.activeName == 2){//进行中
            this.tabList[1].num = res?.total || 0;
          }
        }else{
          this.tableData = [];
          this.pager.total = 0;
          this.pager.pageNum = 1;
          this.tabList[0].num = 0;
          this.tabList[1].num = 0;
          this.loading = false;
        }
      })
      .catch(() => {
        this.tableData = [];
        this.pager.total = 0;
        this.pager.pageNum = 1;
        this.loading = false;
      });
    },

    //下发
    handleDistribute(){
      this.detailDialog.row = null;
      this.detailDialog.title = "异常下发";
      this.detailDialog.mode = "distribute";
      this.detailDialog.visible = true;
    },

    //上报
    handleReport(){
      this.detailDialog.row = null;
      this.detailDialog.title = "异常上报";
      this.detailDialog.mode = "report";
      this.detailDialog.visible = true;
    },

    //审核
    handleApproval(row){
      this.detailDialog.row = row?.id ? row : null;
      this.detailDialog.title = "上报异常审核";
      this.detailDialog.mode = "approval";
      this.detailDialog.visible = true;
    },

    //处理,查看
    handleHandle(row,type){
      this.excepData.row = row;
      this.excepData.visible = true;
      this.excepData.mode = type;
    },

    //查看异常详情
    handleLook(row){
      this.lookDialog.row = row?.id ? row : null;
      this.lookDialog.title = "异常上报详情";
      this.lookDialog.visible = true;
    },

    //转办
    handleTransfer(row){
      this.transferDialog.row = row;
      this.transferDialog.visible = true
    },

    //忽略
    handleIgnore(row){
      let rows = [];
      if (row) {
        rows = [row]
      } else {
        rows = this.$refs.Table.selection;
      }
      this.ignoreDialog.row = rows;
      this.ignoreDialog.visible = true;
    },

    handleSelectionChange(selection) {
      if (selection.length > 1) {
        this.single = false;
      } else if (selection.length == 1) {
        this.single = true;
      } else {
        this.single = null;
      }
    },

    handleClick(tab, event) {
      this.columnData = [];
      this.tableData = [];
      this.pager.total = 0;
      this.pager.pageNum = 1;
      this.activeName = tab.name;
      this.columnData = this[this.columnMap[this.activeName]];
      this.getList();
    },

    selectQuery(list){
      this.stationList = [];
      const item = this.$refs["cascader"].getCheckedNodes();
      if(item?.length){
        if(item[0].level == 3){//选产线
          this.queryParmas.factoryDeptCode = item[0]?.pathNodes[0]?.data?.code || null;
          this.queryParmas.workshopCode = item[0]?.pathNodes[1]?.data?.code || null;
          this.queryParmas.erpProductionLineCode = item[0]?.data?.code || null;
          const factoryList = this.treePermitList.filter(ele => ele.code === this.queryParmas.factoryDeptCode)
          const workshopList = factoryList[0].children.filter(item => item.code === this.queryParmas.workshopCode)
          const lineList = workshopList[0].children.filter(item => item.code === this.queryParmas.erpProductionLineCode)
          lineList.forEach(item => {
            if(item?.children?.length){//获取工位数据
              this.stationList = this.stationList.concat(item.children)
            }
          })
        }
        else if(item[0].level == 2){//选车间
          this.queryParmas.factoryDeptCode = item[0]?.pathNodes[0]?.data?.code || null;
          this.queryParmas.workshopCode = item[0]?.data?.code || null;
          this.queryParmas.erpProductionLineCode = null;
          let factoryList = this.treePermitList.filter(ele => ele.code === this.queryParmas.factoryDeptCode);
          const workshopList = factoryList[0].children.filter(item => item.code === this.queryParmas.workshopCode)
          workshopList.forEach(ele => {
            if(ele?.children?.length){//获取产线数据
              ele.children.forEach(item => {
                if(item?.children?.length){//获取工位数据
                  this.stationList = this.stationList.concat(item.children)
                }
              })
            }
            else{
              this.stationList = [];
            }
          })
        }
        else if(item[0].level == 1){//选工厂
          this.queryParmas.factoryDeptCode = item[0]?.data?.code || null;
          this.queryParmas.workshopCode = null;
          this.queryParmas.erpProductionLineCode = null;
          const factoryList = this.treePermitList.filter(ele => ele.code === this.queryParmas.factoryDeptCode);
          factoryList.forEach(tar => {
            if(tar?.children?.length){//获取车间数据
              tar.children.forEach(ele => {
                if(ele?.children?.length){//获取产线
                  ele.children.forEach(item => {
                    if(item?.children?.length){//获取工位数据
                      this.stationList = this.stationList.concat(item.children)
                    }
                  })
                }
                else{
                  this.stationList = [];
                }
              });
            }
            else{
              this.stationList = [];
            }
          })
        }
        if(this.posStationType == "1"){//如果当前选的工位，则清空工位
          this.queryParmas.workStationId = null;
        }
        this.posStationList[0].disabled = false;
      }else{
        this.queryParmas.factoryDeptCode = null;
        this.queryParmas.workshopCode = null;
        this.queryParmas.erpProductionLineCode = null;
        this.posStationList[0].disabled = true;
        if(this.posStationType == "1"){//如果当前选的工位，则清空工位
          this.queryParmas.workStationId = null;
        }
      }
      this.getList();
    },

    //切换工位和岗位，清空工位和岗位的数据
    selectType(){
      this.queryParmas.postManageCode = null;
      this.queryParmas.workStationId = null;
      this.getList();
    },

    //选择工位和岗位
    queryData(){
      this.getList();
    },

    lookMore(){
      this.$router.push({ path: "../exceptionMgmt/operate"}).catch(()=>{});
    },

    resetFormData(){
      this.columnData = [];
      this.tableData = [];
      this.activeName = "1";
      this.queryParmas = {
        factoryDeptCode: null,
        workshopCode: null,
        erpProductionLineCode:null,
        workStationId:null,
        postManageCode:null
      }
      this.stationList = [];
      this.erpCommonList = [];
      this.posStationType = "2";
      this.posStationList = [
        {label:"工位",value:"1",disabled:true},
        {label:"岗位",value:"2",disabled:false}
      ]
    }
  },

  updated() {
    if (this.$refs.Table && this.$refs.Table.doLayout) {
      this.$refs.Table.doLayout();
    }
  },

  // watch:{
  //   tabName(newValue){
  //     if(newValue){
  //       this.activeName = newValue;
  //       this.columnData = this[this.columnMap[this.activeName]];
  //       this[this.functionMap[this.activeName]]()
  //     }
  //   }
  // },
  components:{
    reportDistributeDialog,
    transferDialog,
    ignoreDialog,
    excepDetail,
    reportDistributeLook
  }
};
</script>
<style lang="scss" scoped>
  .work-abnormal-dialog{
    ::v-deep.el-dialog__body{
      height:calc(100vh - 12rem);
      max-height:calc(100vh - 12rem);
      padding:8px 16px 0 16px;
      .box-card{
        width: 100%;
        height:100%;
        .clearfix{
          color: #F59A23;
          .block-title{
            margin-bottom: 0;
            flex:1
          }
          .block-title{
            margin-bottom: 0;
            .title.line{
              color: #313131;
            }
            .title::before{
              background:#34855B;
            }
          }
          .more{
            margin-bottom: 0.5rem;
            font-size:14px;
            .el-link.el-link--warning{
              margin-left: 10px;
              color:#34855B;
              .el-link--inner{
                display:flex;
                align-items: center;
              }
              img{
                width: 16px;
                height: 16px;
              }
            }
          }
        }
        .el-tabs{
          display: flex;
          align-items: center;
          justify-content: space-between;
          .item {
            display: flex;
            align-items: center;
            img{
              width: 18px;
              height: 18px;
            }
            .name{
              padding:0 6px
            }
            .total-fz{
              font-size:16px;
              line-height: 16px;
            }
          }
          .el-tabs__content{
            margin: 0 0 0.9375rem;
          }
        }
        .status-1{
          color: #D9001B;
          font-weight: 600;
        }

        .status-2{
          color: #F59A23;
          font-weight: 600;
        }
        .status-3{
          color: #88c446;
          font-weight: 600;
        }
        .abnormaldes{
          display: inline-block;
          display: -webkit-box;
          -webkit-box-orient:vertical;
          overflow: hidden;
          text-overflow: ellipsis;
          -webkit-line-clamp: 2
        }
        .pagination-container{
          margin-top: 0;
          margin-bottom: 0;
        }
      }
    }
  }
</style>
